<template>
  <div class="outer-padding">
    <div class="menu-block">
      <p class="font333 bold mt-8">侧边导航</p>
      <p class="font999 pdb-16 line">2022.03.23 12:23:00</p>
      <div class="btn df aic jcsb mt-32">
        <div class="df aic">
          <a-switch v-model:checked="valueChecked"></a-switch>
          <span class="ml-8">开启</span>
        </div>
        <div class="df">
          <a-button class="mr-8" @click="$router.push(`/sysdetail?isEdit=false`)">查看</a-button>
          <a-button
            type="primary"
            style="width: 92px"
            @click="$router.push(`/sysdetail?isEdit=true`)"
            >编辑
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'

  export default defineComponent({
    name: 'Markcomponent',
    components: {},
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        valueChecked: false,
      })

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {})

      return {
        ...toRefs(state),
        tableRef,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .menu-block {
    width: 376px;
    height: 180px;
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    .line {
      border-bottom: 1px solid #dddddd;
    }
  }
</style>
